<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button type="button" id="reset">重新开始</button>
    <br>
    请输入要猜的数字：<input type="text" id="number">
    <button type="button" id="button">猜</button>
    <br>
    已经猜的次数：<span id="count">0</span>
    <br>
    结果：<span id="result"></span>

    <script>
        var inputE = document.querySelector("#number");
        var countE = document.querySelector("#count");
        var resultE = document.querySelector("#result");
        var btn = document.querySelector("#button");
        var resetBtn = document.querySelector("#reset");
        // 随机生成一个 1-100 的数字
        var guessNumber = Math.floor(Math.random() * 100) + 1// 0 - 1 之间的数
        var count = 0;
        // on: 当
        // click: 点击
        // 事件驱动（Event-Drive）：只要真正发生了点击事件时，才执行该函数
        btn.onclick = function () {
            count++;
            countE.innerText = count;
            var userGuess = parseInt(inputE.value);
            if (userGuess == guessNumber) {
                resultE.innerText = "猜对了";
                resultE.style = "color: gray;";
            } else if (userGuess < guessNumber) {
                resultE.innerText = "猜小了";
                resultE.style = "color: blue;";
            } else {
                resultE.innerText = "猜大了";
                resultE.style = "color: red;";
            }
        };
        resetBtn.onclick = function () {
            guessNumber = Math.floor(Math.random() * 100) + 1
            count = 0;
            countE.innerText = count;
            resultE.innerText = "";
            inputE.value = "";
        }
    </script>
</body>

</html>